<template>
	<view class="msgpage">
		<Navbar title="意见反馈" />
		<view class="pagebox">
			<view class="ctxbox">
				<span>
					<span>反馈类型</span>
				</span>
				<view class="typebox">
					<button :class="['btntype',activeBtn==item.id?'activebtn':'']" v-for="item in btnList" :key="item.id"
						@click="handleType(item)">
						{{item.title}}
					</button>
				</view>
			</view>
			<view class="ctxbox">
				<span><span>问题描述</span></span>
				<textarea class="ctxarea" v-model="obj.content" :auto-height="true" :maxlength="300" :auto-focus="true"
					placeholder="请输入您的意见(300字以内)" placeholder-style="color:#50974B"></textarea>
			</view>
			<view class="flexbtn">
				<button class="mymsg" @click="handleMyMsg()">我的反馈</button>
				<button class="sendbtn" @click="handleSend()">提交</button>
			</view>
		</view>
		<image src="../../static/nimg/bg.png" class="page_bg_img" mode=""></image>
	</view>
</template>

<script>
import {request} from '@/utils/request.js'
import Navbar from '@/components/navbar.vue'
	export default {
		components:{
			Navbar
		},
		data() {
			return {
				activeBtn: '',
				obj:{
					title:'',
					content:''
				},
				btnList: [{
						id: 1,
						title: '信息错误/缺失'
					},
					{
						id: 2,
						title: '功能建议'
					},
					{
						id: 3,
						title: '程序问题'
					},
					{
						id: 4,
						title: '其他反馈'
					},
				]
			}
		},
		methods: {
			handleType(item) {
				this.activeBtn = item.id
				this.obj.title = item.title
			},
			handleSend() {
				if(this.obj.title!='' && this.obj.content!=''){
					request.postJson('/suggest/submit',this.obj).then(res=>{
						if(res.code === 200){
							uni.showToast({
								title:'提交成功',
								icon:'none'
							})
							setTimeout(()=>{
								this.handleMyMsg()
							})
						}
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '请选择反馈类型/输入问题描述'
					})
				}
			},
			handleMyMsg(){
				uni.navigateTo({
					url:'/pages/messageSend/messageList'
				})
			}
		}
	}
</script>

<style>
	.msgpage {
		height: 100%;
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
		/* padding: 20rpx 20rpx 0 20rpx; */
		row-gap: 20px;
		color: #074F1E;
	}
	.ctxbox {
		font-size: 30rpx;
		width: 100%;
		display: flex;
		font-weight: 600;
		flex-direction: column;
		row-gap: 20rpx;
		margin: 20rpx 0;
	}

	.ctxarea {
		border-radius: 20rpx;
		min-height: 400rpx;
		width: 92%;
		font-weight: 400;
		padding: 4%;
		font-size: 15px;
		color: #50974B;
		background-color: #C4E6C2;
	}

	.sendbtn {
		font-size: 16px;
		border: none;
		width: 300rpx;
		height: 80rpx;
		background: #2E996C;
		color: white;
		border-radius: 40rpx;
	}

	.sendbtn::after {
		border: none;
	}

	.mymsg {
		width:300rpx;
		height: 80rpx;
		border-radius: 40rpx;
		border: 1rpx solid #2E996C;
		background-color: #C4E6C2;
		color: #2E996C;
		font-size: 16px;
	}

	.mymsg::after {
		border-radius: 40rpx;
		border: 1rpx solid #2E996C;
	}
	.typebox{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		row-gap: 10rpx;
		border-radius: 20rpx;
		background-color: #C4E6C2;
		padding:30rpx 20rpx;
	}
	.btntype{
		flex-basis: 300rpx;
		font-size: 15px;
		color: #50974B;
		background-color: #D4F5D2;
		border-radius: 33rpx;
		border: none;
	}
	.btntype::after{
		border: none;
	}
	.activebtn{
		background-color: #2E996C;
		color: white;
	}
	.btntype:last-child:nth-child(2n-1){
		margin-left: 16px;
	}

	.flexbtn {
		/* position: fixed; */
		display: flex;
		justify-content: space-around;
		align-items: center;
		column-gap: 20rpx;
		z-index: 3;
		bottom: 5%;
		left: 20rpx;
		right: 20rpx;
		width: 100%;
		margin: 30rpx auto;
	}
</style>